<template>
    <div>
      <div class="title">
        <h3>编辑地址</h3>
      </div>
      <ul class="box">
        <li class="item">
          <input type="text" placeholder="收货人" v-model="consignee.name">
        </li>
        <li class="item">
          <input type="number" maxlength="11" placeholder="联系方式" v-model="consignee.phone">
        </li>
        <li class="item">
          <input type="text" placeholder="收货地址" v-model="consignee.address">
        </li>
        <li class="item">
          <label><input type="checkbox" class="choice" v-model="consignee.default"> 设为默认地址</label>
        </li>
        <li class="item">
          <button @click="onSave">保存地址</button>
        </li>

        <li v-if="consignee.id > 0" class="item">
          <button class="del-btn" @click="onDelete">删除地址</button>
        </li>
      </ul>
    </div>
</template>

<script>
import LocalStorage from '../utils/local-storage';
import Consignee from '../api/order/consignee';

export default {
  name: 'add-address',

  data() {
    return {
      consignee: {
        id: -1,
        name: '',
        phone: '',
        address: '',
        default: false
      }
    };
  },

  mounted() {
    this.initConsignee();
  },

  methods: {
    initConsignee() {
      const c = LocalStorage.getObject('edit-consignee');
      if (c) {
        this.consignee = c;
      }
    },

    async onSave() {
      if (this.validate()) {
        const n = LocalStorage.getObject('consignee-num');
        const {consignee} = this;
        if (n == 0 || consignee.default) {
          consignee.default = 1;
        } else {
          consignee.default = 0;
        }
        try {
          const res = await Consignee.save(consignee);
          this.$router.go(-1);
        } catch (e) {
          console.log(e);
          alert('保存失败，请稍后重试');
        }

      }

    },

    async onDelete() {
      const res = await Consignee.del(this.consignee.id);
      this.$router.go(-1);
    },

    validate() {
      const {address, phone, name} = this.consignee;
      if (name.length == 0) {
        alert('请填写收货人姓名');
        return false;
      }

      if (!/^1[34578]\d{9}$/.test(phone)) {
        alert('手机号码有误，请重填');
        return false;
      }

      if (address.length == 0) {
        alert('请填写收货地址')
        return false;
      }

      return true;
    },

  },

}
</script>

<style scoped>
.title{
  height: 1.4rem;
  -webkit-box-shadow: 0 1px 3px #cddcdc;
  box-shadow: 0 1px 3px #cddcdc;
}
.title h3{
  height: 1.4rem;
  line-height: 1.4rem;
  text-align: center;
  color: #000;
  font-size: .42rem;
}
.box{
  padding: .3rem;
}
.item{
  margin-bottom: .3rem;
}
.item>input{
  display: block;
  width: 100%;
  border: 1px solid #d1d1d1;
  background: #fff;
  line-height: 1.1rem;
  height: 1.1rem;
  padding: 0 .2rem;
  font-size: .38rem;
  color: #333;
}
.item label{
  padding-left: .1rem;
}
.item label input{
  position: relative;
  top: 2px;
}
.item button{
  display: block;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  background: #f00;
  color: #fff;
  border: none;
  width: 5rem;
  margin: 1.5rem auto;
}

.item .del-btn {
  color: #f00;
  background: #fff;
  border: 1px solid #f00;
}
</style>
